<template>
  <div id="orderCheck">
    <van-nav-bar
        :title="'订单状态：'+status"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
    />
    <van-row v-if="status!='待发货'">
      <van-col style="font-size: 14px;margin-top: 0.2rem;margin-left:10px">还剩以下时间自动确认收货：</van-col>
      <van-col><van-count-down millisecond :time="time-sendTime>0?time-sendTime:0" format="DD天HH时" style="font-size: 14px;margin-top: 0.2rem"/></van-col>
    </van-row>
    <div class="address-wrap" >
      <div class="address">
        <span>送至 </span>
        <span>{{ address.region }}</span>
      </div>
      <div class="address">
        <span>{{ address.detailed_address }}</span>
      </div>
      <div class="name" >
        <span>接收人 </span>
        <span>{{ address.username }} </span>
        <span>{{ address.phone }}</span>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="订单编号" :value="uuid" />
      <van-cell title="商品" :value="`共${checkedShopCount}件`"></van-cell>
      <van-card
          v-for="(goods) in checkedShopCart"
          :key="goods.id"
          :num="goods.count===undefined?1:goods.count"
          :desc="goods.name+goods.colorName+goods.sizeName"
          :price="goods.price.toFixed(2)"
          :title="goods.title"
          :thumb=baseURL1+goods.img
      >
      </van-card>
    </van-cell-group>
    <van-cell-group style="margin-top: 0.6rem">
      <van-cell title="送达时间" value="2022-10-31 14:00 前"  />
      <van-cell title="商品总价" :value="'￥'+parseInt(this.sumPrice).toFixed(2)"  />
      <van-cell title="运费" :value="'￥'+parseInt(this.transportPrice).toFixed(2)"  />
      <van-cell title="实付款" :value="'￥'+(parseInt(this.sumPrice)+parseInt(this.transportPrice)).toFixed(2)"   />
      <van-cell title="获得积分" value="2分" />
    </van-cell-group>
    <van-button plain round type="info" style="margin-left: 8rem">{{status==='待发货'?'取消订单':'确认收货'}}</van-button>
    <van-button plain round type="info" style="margin-left: 2rem" v-if="status==='待发货'||'已确认收货'" @click="refund">退款</van-button>
  </div>
</template>

<script>
import {getAllOrder, getOrderAddress, userAddressList} from "@/api/api";
import {Toast} from "vant";
import {mapMutations} from "vuex";
import img from "@/api/api"
import Refund from "@/views/order/children/Refund";
const ads = {
  id: "",
  name: "",
  tel: "",
  address:"",
  zipCode:"",
  isDefault: true,
  addressesId:0,
};
export default {
  name: "OrderCheck",
  created() {
    if(this.$route.query.goodsList[0].id === undefined){
      this.status = this.$store.state.orderDetail.status;
      this.shopCart = this.$store.state.orderDetail.goodsList;
      this.uuid = this.$store.state.orderDetail.uuid;
    } else{
      let orderNew = {
        uuid:this.$route.query.uuid,
        status:this.$route.query.status,
        goodsList:this.$route.query.goodsList
      };
      console.log(this.$route.query.status);
      this.saveOrderDetail(orderNew);
      this.status = this.$route.query.status;
      this.shopCart = this.$route.query.goodsList;
      this.uuid = this.$route.query.uuid;
    }
    // getAllOrder(1,-1).then(
    //     (resp)=>{
    //       if(resp.data.code === 2000){
    //         let tempOrder = resp.data.data.order;
    //         tempOrder.forEach((item, index) => {
    //           if(item.uuid === this.uuid){
    //             this.realPrice = item.totalPrice;
    //           }
    //         })
    //       }else{
    //         Toast(resp.data.message)
    //       }
    //     }
    // )
    getOrderAddress(this.uuid).then((response) => {
      if(response.data.code === 2000){
        this.address  = response.data.data;
        console.log(this.address)
      }else{
        Toast(response.data.message);
      }
    });
  },
  data(){
    return{
      time:2 * 24 * 60 * 60 * 1000,
      address:{},
      status: "",
      shopCart: [],
      baseURL1:img.src,
      sumPrice:0,
      transportPrice:0,
      uuid:"",
      count:"",
      realPrice:""
    }
  },
  methods:{
      refund(){
        this.$router.push({path:"Refund",
            query: {
                checkedShopCart:this.shopCart,
                uuid:this.uuid,
                count:this.count,
                pay:(parseInt(this.sumPrice) +parseInt(this.transportPrice)).toFixed(2)
            }
        })
      },
    onClickLeft() {
      this.$router.go(-1)
    },
    ...mapMutations(["saveOrderDetail"]),
  },
  computed:{
    // 1. 获取选中的商品
    checkedShopCart(){
      let shopCart = [];
      Object.values(this.shopCart).forEach((goods, index)=>{
        shopCart.push(goods);
        this.sumPrice+=goods.price*parseInt(goods.count);
      });
      return shopCart;
    },
    // 2. 选中商品的总件数
    checkedShopCount(){
      let goodsCount = 0;
      Object.values(this.checkedShopCart).forEach((goods, index) => {
          goodsCount+=parseInt(goods.count);
      })
      return goodsCount;
    },
    //3、倒计时流去时间
    sendTime(){
      let tempUUID = this.$route.query.uuid.split("");
      let year = ""+tempUUID[0]+tempUUID[1]+tempUUID[2]+tempUUID[3];
      let month = ""+tempUUID[4]+tempUUID[5];
      let day = ""+tempUUID[6]+tempUUID[7];
      let hour = ""+tempUUID[8]+tempUUID[9];
      let minute = ""+tempUUID[12]+tempUUID[13];
      let second = ""+tempUUID[10]+tempUUID[11];
      let dateStr = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
      let before = new Date(dateStr);
      let now = new Date();
      let result = now.getTime()-before.getTime();
      return result;
    }
  },
  watch:{
        checkedShopCount:{
          deep:true,
          handler:function (result){
            this.count = result;
          }

    }
  }
}
</script>

<style scoped>
#orderCheck{
  background-color: white;
}
.address-wrap {
  margin-bottom: 20px;
  background: #fff;
  position: relative;
  font-size: 14px;
  padding: 15px;
  color: #222333;
}
.address-wrap  .name, .address {
  margin: 10px 0;
}
.address-wrap::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
  background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
  background-size: 80px;
  content: '';
}
</style>
